<template>
  <div class="order_list components_init">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="clearfix_text">操作</span>
        <span>
          <el-button style="float: right;" type="primary" @click="handleSearch()">搜索</el-button>
          <el-button style="float: right;margin-right: 10px;" type="primary" @click="resetBlick()">重置</el-button>
          <el-button style="float: right;" type="primary">导出</el-button>
        </span>
      </div>
      <el-form :inline="true" :model="listQuery" class="demo-form-inline">
        <el-form-item label="订单号">
          <el-input v-model="listQuery.orderNo" placeholder="订单号" />
        </el-form-item>
        <el-form-item label="运单号">
          <el-input v-model="listQuery.freightNo" placeholder="运单号" />
        </el-form-item>
        <el-form-item label="装货单位">

          <el-autocomplete
            v-model="listQuery.loadCompany"
            class="inline-input"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleLoadSelect"
          />
        </el-form-item>
        <el-form-item label="卸货单位">
          <el-autocomplete
            v-model="listQuery.unloadCompany"
            class="inline-input"
            :fetch-suggestions="querySearch"
            placeholder="请输入卸货单位"
            @select="handleUnLoadSelect"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="listQuery.status" placeholder="状态">
            <el-option
              v-for="item in orderStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="接单时间">
          <el-date-picker
            v-model="listQuery.user"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item> -->
        <el-form-item label="司机姓名">
          <el-input v-model="listQuery.driverName" placeholder="司机姓名" />
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input v-model="listQuery.licenseNo" placeholder="车牌号" />
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card table_card">
      <div slot="header" class="clearfix">
        <span>
          <el-button style="float: right; margin-left:20px" type="primary">新增异常</el-button>
          <el-button style="float: right; margin-left:10px" type="primary">批量申请支付</el-button>
        </span>
      </div>
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="订单号" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.orderNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="运单号" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.freightNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="货物名称" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.goodsName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="装货单位" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.loadCompany }}</span>
          </template>
        </el-table-column>
        <el-table-column label="装货地" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.loadCity+row.loadDistrict+row.loadAddress }}</span>
          </template>
        </el-table-column>
        <el-table-column label="卸货单位" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.unloadCompany }}</span>
          </template>
        </el-table-column>
        <el-table-column label="卸货地" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.unloadCity+row.unloadDistrict+row.unloadAddress }}</span>
          </template>
        </el-table-column>
        <el-table-column label="重量" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.loadingWeight }}</span>
          </template>
        </el-table-column>
        <el-table-column label="预付款" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.advanceMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column label="尾款" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.tailMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column label="回单款" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.receiptMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单价（元/吨）" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.priceMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column label="运单金额" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.totalMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column label="异常金额" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.exceptionMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column label="服务费" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.serviceMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column label="司机姓名" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.driverName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="车牌号" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.licenseNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.driverPhone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="接单时间" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.goodsName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="运单状态" align="center">
          <template slot-scope="{ row }">
            <span>{{ getStatus(row.status) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <span>{{ row.status }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.current"
        :limit.sync="listQuery.size"
        @pagination="getDispatchList"
      />
    </el-card>
    <!-- <div class="order_list_pagination">
      <el-pagination
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div> -->
    <!-- 弹窗 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <span v-if="false">需要注意的是内容是默认不居中的</span>
      <table v-else border="1" cellspacing="0" cellpadding="5" borderColor="#ccc">
        <tr class="table_header">
          <td>款项</td>
          <td>原金额</td>
          <td>异常类型</td>
          <td>异常金额</td>
          <td>现金额</td>
        </tr>
        <tr class="table_body">
          <td />
          <td />
          <td />
          <td />
          <td />
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDispatchList } from '@/api/tms/dispatch'
import { getContantList } from '@/api/tms/contact'
import Pagination from '@/components/Pagination'
export default {
  name: 'OrderList',
  components: {
    Pagination
  },
  data() {
    return {
      centerDialogVisible: false,
      // 弹窗标题 根据点击的按钮进行赋值
      dialogTitle: '新增异常',

      listQuery: {
        current: 1,
        size: 20,
        orderNo: '',
        freightNo: '',
        loadCompany: '',
        unloadCompany: '',
        status: '',
        licenseNo: '',
        driverName: ''
      },

      currentPage4: 1,
      tableBtnIndex: 0,
      // 订单状态选择列表
      orderStatusList: [{
        value: '',
        label: '全部'
      }, {
        value: 'PENDING',
        label: '待提货'
      }, {
        value: 'PROCESSING',
        label: '运输中'
      }, {
        value: 'STOP',
        label: '已送达'
      }, {
        value: 'DONE',
        label: '已完成'
      }, {
        value: 'CANCEL',
        label: '已取消'
      }],
      // 表单筛选按钮列表
      tableBtnList: ['全部', '未完成', '已完成', '已取消'],
      tableData: [],
      total: 0,
      listLoading: false
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.tableData = []
      this.getDispatchList()
    },
    handleSearch() {
      this.listQuery.current = 1
      this.getDispatchList()
    },
    resetBlick() {
      this.searchFrom = {
        current: 1,
        size: 20,
        orderNo: '',
        freightNo: '',
        loadCompany: '',
        unloadCompany: '',
        status: '',
        licenseNo: '',
        driverName: ''
      }
      this.getDispatchList()
    },
    getDispatchList() {
      this.listLoading = true
      const data = Object.assign({}, this.listQuery)
      data.loadCompany = data.loadCompany ? [data.loadCompany] : []
      data.unloadCompany = data.unloadCompany ? [data.unloadCompany] : []
      getDispatchList(data).then(res => {
        // this.tableData  = this.tableData.concat(res.records);
        this.tableData = res.records
        this.total = res.total
        this.listLoading = false
      })
    },
    // 根据装货单位模糊搜索
    async querySearch(queryString, cb) {
      var res = await getContantList({ unit: queryString })
      if (res.length !== 0) {
        res.forEach((item) => {
          item.value = item.unit
        })
      }
      cb(res)
    },
    handleLoadSelect(item) {
      this.listQuery.loadCompany.push(item)
    },
    handleUnLoadSelect(item) {
      this.listQuery.unloadCompany.push(item)
    },
    getStatus(type) {
      let text = ''
      this.orderStatusList.filter(item => {
        if (item.value === type) {
          text = item.label
        }
      })
      return text
    },
    onSubmit() {
      console.log('submit!')
    },
    tableFiltrate(index) {
      this.tableBtnIndex = index
    },
    handleSelectionChange() {

    },
    handleCurrentChange() {

    },
    handleSizeChange() { },
    pushDetail(id) {
      this.$router.push({ path: '/orderManage/orderDetail' })
    },
    // 根据title判断是调付款还是预付款......接口
    centerDialogConfirm() {

    }
  }
}
</script>
<style lang="scss">
.order_list {
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .table_card {
    .el-card__header {
      border: 0;
    }
    .clearfix {
      .clearfix_text {
        button {
          color: #45454b;
          font-weight: 700;
          margin: 0;
          padding: 0 15px;
          border-radius: 0;
        }
        .pitchUpStatus {
          color: #1890ff;
        }
        button:nth-child(n + 2) {
          border-left: 2px solid #45454b;
        }
      }
    }
    .el-card__body {
      padding-top: 0;
    }
  }
  .el-form-item {
    margin-left: 30px;
  }
  .order_list_pagination {
    display: flex;
    justify-content: flex-end;
    width: 98%;
    margin: 20px 0;
  }
}
</style>
